<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>活動</title>

<link rel="stylesheet"
	href="../css/sunny/fontsize0.9/jquery-ui-1.10.4.custom.css">
	
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>

<style>
body {
	padding: 0;
	margin: 0;
}
</style>

<script>
	var haveact = [ new Date(2014, 3 - 1, 1), new Date(2014, 3 - 1, 10),
			new Date(2014, 3 - 1, 11) ];
	var haveinv = [ new Date(2014, 3 - 1, 20), new Date(2014, 3 - 1, 21),
			new Date(2014, 3 - 1, 22) ];

	$(function() {
		$("#datepicker").datepicker({
			beforeShowDay : sethaveact
		});
		$(document).tooltip();
		setdayclass();
		$(document).on('click', setdayclass);
	});

	function setdayclass() {
		$(".haveactclass").unbind("click").on('click', function() {
			//parent.parent.$('#option').dialog('open');
			alert('User clicked on "foo."');
		}).children().css("background-image", "url('../images/paw-icon.jpg')");
		//children().append("<img src='../images/paw-icon.jpg' style='width: 8px; height: 8px'>")
		$(".haveinvclass").unbind("click").on('click', function() {
			alert('User clicked on "foo."');
		}).children().css("background-image", "url('../images/ajax-loader.gif')");
		//$(".else").unbind( "click" );
		// $(".else").unbind( "click" ).contents().contents().unwrap();
	}

	function sethaveact(date) {
		for ( var i = 0; (i < haveact.length) || (i < haveinv.length); i++) {
			if (haveact[i] - date == 0) {
				return [ true, 'haveactclass', '今天有活動' ];
			} else if (haveinv[i] - date == 0) {
				return [ true, 'haveinvclass', '有活動邀請' ];
			}
		}
		return [ false, 'else', '' ];
	}
</script>

</head>

<body>
	
	<div style="text-align: center;">
		<span id="datepicker" style="display: inline-block;"></span>
	</div>
	
</body>

</html>

<!-- 
上一版code，從第9行取代到最後

<script>
		
		var dates = [new Date(2014, 3-1, 1), new Date(2014, 3-1, 10), new Date(2014, 3-1, 11)];
		
		$(function() {
		    $( "#datepicker" ).datepicker({beforeShowDay: highlightDays});
		    $( document ).tooltip();
		    $(".highlight").unbind( "click" ).on('click',function() {
		    	//parent.parent.$('#option').dialog('open');
		        alert('User clicked on "foo."');
		      })//加加處;
		    //右邊code加到「加加處」.html("<a href='#'><img src='../images/paw-icon.jpg' style='width: 26px; height: 26px'></a>")
		    $(".else").unbind( "click" );
		   	// $(".else").unbind( "click" ).contents().contents().unwrap();
		  });
		
		function highlightDays(date) {
	          for (var i = 0; i < dates.length; i++) {
	                  if (dates[i]-date==0) {
	                          return [true, 'highlight', '今天有活動'];
	                  }
	          }
	          return [false, 'else', ''];
	  }
		</script>
		
		<style>

  </style>
  
	</head>

<body>
<div id="datepicker"></div>
</body>
</html>

 -->






<!-- 
舊code，放在<style>內
   .highlight
   {
   background-color : Green !important;
   background-image : '../images/paw-icon.jpg' !important;
   background: '../images/paw-icon.jpg' !important;
   filter: Alpha(Opacity=100) !important;
   opacity: 1 !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
   
   }

   ui-datepicker-unselectable.highlight
   div.ui-state-default{color:red; border-color:#ffffff}
 -->
